<template>
	<view class="page-container back-white">
		
		<!-- 审核状态提示 -->
		<view v-if="post.status!=1" class="row-box center pall-lg back-grey-light" style="height: fit-content;">
			<text :class="post.status==2?'red s32':'grey-dark s32'" style="min-width: 160rpx;text-align: center;">{{ post.status==2?`${statusArr[post.status]}：`:statusArr[post.status] }}</text>
			<text v-if="post.status==2" class="red" style="text-decoration: underline;">{{ post.messageContent }}</text>
		</view>
		
		<!-- 帖子内容 -->
		<view class="main prow-l">
			<!-- 头部 -->
			<view class="row-box sb">
				<!-- 个人头像名称发布时间 -->
				<view class="row-box pcol-l">
					<u-avatar class="mr-l" style="height: 84rpx;" size="84" :src="post.userIcon"></u-avatar>
					<view class="col-box">
						<text>{{ post.userNickName }}</text>
						<text class="s24 grey-light">{{ post.ct }}</text>
					</view>
				</view>
				<!-- 举报按钮 -->
				<view v-if="post.status==1" class="report-button back-grey row-box center" @click="goReport(post.id, 3, post.description)">
					<text class="grey-dark">举报</text>
				</view>
			</view>
			<view class="content" style="min-height: 200rpx;">
				<!-- 帖子文字内容 -->
				<text style="display: block;width: 100%;">{{ post.description }}</text>
				<!-- 图片1张显示一行1张 2张4张一行2张 其他都是一行3张  -->
				<view v-if="arrImage.length" style="padding-top: 20rpx;" class="image-grid" :class="imageGridNum">
					<image v-for="(item, index) in arrImage" :key="index" class="image radius-base" :src="item"
						:mode="arrImage.length==1?'heightFix':'aspectFill'" @click="previewImage(index, arrImage)"></image>
				</view>
				<!-- 联系方式 -->
				<view v-if="post.contactNumber" class="row-box">
					<text class="s24 primary mr-10">{{ contactArr[post.contactId-1] }}</text>
					<text class="s24 primary">{{ post.contactNumber }}</text>
					<!-- <text class="s24 primary">复制</text> -->
					<image class="icon36 pall-base" src="../static/复制.png" @click="copyContact()"></image>
				</view>
			</view>
			<view class="row-box pcol-base">
				<u-icon class="mr-base" name="map-fill" :color="primaryColor" :size="28"
					:label="post.schoolName?post.schoolName:'全部校区'" label-size="24" label-pos="right" :label-color="primaryColor" margin-left="4">
				</u-icon>
				<u-icon class="mr-base" name="tags-fill" :color="primaryColor" :size="28"
					:label="post.typeName" label-size="24" label-pos="right" :label-color="primaryColor" margin-left="4">
				</u-icon>
			</view>
		</view>
		
		<!-- 评论区 -->
		<view class="pcol-s">
			<view class="comment-head">
				<view class="prow-l pcol-lg">
					<text class="bold">评论回复</text>
				</view>
			</view>
			<view v-if="comments.length" class="prow-l">
				<!-- <text class="s24 comment-amount">共{{ formatPraisesComments(comments.length, 0) }}条评论</text> -->
				<view v-for="(item, index) in comments" :key="index" class="row-box start comment-box">
					<u-avatar class="mr-l pcol-lg" :style="{height: 72+'rpx'}" :size="72" :src="item.userIcon"></u-avatar>
					<view class="pcol-lg content" :class="index?'border-top':''" style="width: 100%;">
						<view @click.stop="addReplyHandle(index)">
							<view class="row-box sb mb-10">
								<text class="grey-light">{{ item.userNickName?item.userNickName:'匿名' }}</text>
								<text class="s24 grey-light">{{ item.ct }}</text>
							</view>
							<view class="comment">
								<text>{{ item.content }}</text>
								<!-- <view class="row-box sb">
									<u-icon class="row-box center icon-item" style="height: 40rpx;" :name="item.praiseStatus?'heart-fill':'heart'"  :color="item.praiseStatus?redColor:'#999999'" :size="30"
										:label="formatPraisesComments(item.praiseCount, 0)" label-size="24" label-pos="right" label-color="#999999" margin-left="10" @click.stop="commentPraise(item.id)">
									</u-icon>
									<text class="s24 grey-light" style="text-align: center;" @click.stop="">举报</text>
								</view> -->
							</view>
						</view>
						<view v-if="item.replyCount" class="col-box">
							<view v-if="item.showReply" class="reply" @click.stop="addReplyHandle(index)">
								<view v-for="(item2, index2) in item.replyList" :key="index2" class="row-box start comment-box" style="padding-top: 8rpx;padding-bottom: 0;">
									<u-avatar class="mr-l pcol-s" :style="{height: 48+'rpx'}" :size="48" :src="item2.replyUserIcon"></u-avatar>
									<view class="pcol-s content" style="width: 100%;">
										<view class="row-box sb mb-10">
											<text class="grey-light">{{ item2.replyUserNickName?item2.replyUserNickName:'匿名' }}</text>
											<text class="s24 grey-light">{{ item2.ct }}</text>
										</view>
										<view class="comment">
											<text>{{ item2.content }}</text>
											<!-- <view class="row-box sb">
												<u-icon class="row-box center icon-item" style="height: 40rpx;" :name="item2.praiseStatus?'heart-fill':'heart'"  :color="item2.praiseStatus?redColor:'#999999'" :size="30"
													:label="formatPraisesComments(item2.praiseCount, 0)" label-size="24" label-pos="right" label-color="#999999" margin-left="10" @click.stop="commentPraise(item2.id)">
												</u-icon>
												<text class="s24 grey-light" style="text-align: center;" @click.stop="">举报</text>
											</view> -->
										</view>
									</view>
								</view>
							</view>
							<view class="pcol-s">
								<u-icon v-if="!item.showReply" name="arrow-down" color="#999" :size="24" label-pos="left" :bold="true"
									:label="`展开${item.replyCount}条回复`" label-size="24" label-color="#999" margin-right="10" @click.stop="showReply(index)">
								</u-icon>
								<u-icon v-else-if="item.replyList.length < item.replyCount"  name="arrow-down" color="#999" :size="24" label-pos="left" :bold="true"
									label="展开更多" label-size="24" label-color="#999" margin-right="10" @click.stop="getPostReplyList(item, 1)">
								</u-icon>
								<u-icon v-else name="arrow-up" color="#999" :size="24" label-pos="left" :bold="true"
									label="收起回复" label-size="24" label-color="#999" margin-right="10" @click.stop="showReply(index)">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</view>
			<view v-else class="row-box center">
				<image src="../static/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</view>
		
		<!-- 底部操作区域 status状态( -1：查看全部，0:审核中，1:审核通过，2:审核拒绝) -->
		<view v-if="post.status==1" class="row-box sb prow-l back-white handle-area">
			<view class="row-box prow-l back-grey edit-button" @click="addCommentHandle()">
				<u-icon name="edit-pen" color="#999999" :size="32"
					label='说点什么...' label-size="28" label-pos="right" label-color="#999999" margin-left="10">
				</u-icon>
			</view>
			<view class="handle-grid">
				<button open-type="share" hover-class="none" class="row-box center" style="background: transparent;">
					<u-icon class="row-box center" name="share" custom-prefix="custom-icon" :color="nomarlColor" :size="36"
						label='分享' label-size="28" label-pos="right" :label-color="nomarlColor" margin-left="10">
					</u-icon>
				</button>
				<u-icon class="row-box center" :name="post.praiseStatus?'heart-fill':'heart'" :color="post.praiseStatus?redColor:nomarlColor" :size="36"
					:label="formatPraisesComments(post.praiseCount, '点赞')" label-size="28" label-pos="right" :label-color="nomarlColor" margin-left="10" @click="postPraise(post.id)">
				</u-icon>
			</view>
		</view>
		<!-- 底部输入框 -->
		<view v-show="showInput" class="input-container" :style="{height: windowHeight+'px'}" @touchmove.stop.prevent = "() => {}" hover-stop-propagation @click.stop="cancelInput()">
			<view class="prow-l pcol-lg back-white col-box input-box" :style="{bottom: keyboardHeight+'px'}" @click.stop="showInput=true">
				<view class="row-box">
					<textarea class="back-grey radius-base input" type="text" v-model="content" placeholder="说点什么..." placeholder-class="placeholder"
						:fixed="true" :auto-height="false" :show-confirm-bar="false" :adjust-position="false" :cursor-spacing="20" @focus="focus" @blur="blur"
					></textarea>
					<view class="send-button" @click="sendHandle()">发送</view>
				</view>
				<view v-if="openStatus" class="row-box sb mt-base" style="flex-direction: row-reverse;">
					<view class="row-box" @click="anonymousTip(post.isRealnameComment)">
						<text class="mr-base">匿名</text>
						<u-switch v-model="anonymous" :disabled="post.isRealnameComment || !isAuthent" :active-color="primaryColor" size="40"></u-switch>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinPost from "@/common/mixin_post.js"
	import { mapState,mapMutations } from "vuex"
	export default {
		mixins: [mixinPost],
		data() {
			return {
				windowHeight: 0, // 窗口可用高度
				keyboardHeight: 0, //键盘高度
				showInput: false, // 是否展示底部输入框
				type: 0, // 0评论 1回复
				commentIndex: null, // 当前回复的评论对象index
				content: '', // 输入内容
				anonymous: false, // 是否匿名
				
				id: null, // id
				post: {}, // 对象
				contactArr: [ '微信', 'QQ', '手机' ],
				comments: [], // 评论列表
				pageIndex: 1,
				pageCount: 0,
				pageSize: 10,
				loadStatus: 'loadmore',  // 加载状态
				reply: [], // 回复列表
				
				statusArr: [ '审核中', '审核通过', '审核拒绝'], // 状态数组
			};
		},
		computed: {
			...mapState('m_user', ['userId', 'isAuthent', 'openStatus']),
			// 图片数组
			arrImage() {
				if (!this.post.images) return []
				return this.post.images.split(',')
			},
			// 图片布局方式
			imageGridNum() { // 图片1张显示一行1张 2张4张一行2张 其他都是一行3张
				let length = this.arrImage.length
				if (length==1) {
					return 'grid1'
				} else if (length==2 || length==4) {
					return 'grid2'
				} else {
					return 'grid3'
				}
			},
		},
		// 定义局部分享
		// 1.发送给朋友
		onShareAppMessage(res) {
		  return {
				title: this.post.description,
				path: this.getCurrentPath(),
				imageUrl: this.arrImage[0],
			}
		},
		// 2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.post.description,
				path: this.getCurrentPath(),
				imageUrl: this.arrImage[0],
			}
		},
		onLoad(options) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.id = Number(options.id)
			// 获取详情
			this.getPostDetail()
			// 获取评论列表
			this.getPostCommentList(0)
		},
		onReachBottom() {
			// 获取评论列表
			this.getPostCommentList(1)
		},
		methods: {
			...mapMutations('m_user', ['updateBackPraise']),
			
			// 复制联系方式
			copyContact() {
				uni.setClipboardData({
					data: this.post.contactNumber,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功！'
						})
					}
				});
			},
			
			// 点击底部评论框
			addCommentHandle() {
				this.type = 0
				this.showInput = true
			},
			
			// 点击回复
			addReplyHandle(index) {
				console.log('点击回复')
				this.type = 1
				this.showInput = true
				this.commentIndex = index
			},
			
			// 点击发送
			sendHandle() {
				if (this.type == 0) {
					this.addPostComment()
				} else {
					this.addPostReply()
				}
			},
			
			// 取消输入
			cancelInput() {
				this.showInput = false
				this.keyboardHeight = 0
			},
			
			// 输入框聚焦
			focus(e) {
				console.log('focus', e)
				// 微信小程序支持
				if (this.keyboardHeight) return
				this.keyboardHeight = e.detail.height
			},
			// 输入框失焦
			blur(e) {
				console.log('blur', e)
				this.keyboardHeight = 0
			},
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 120rpx;
	}
	
	// 举报按钮
	.report-button {
		width: 120rpx;
		height: 56rpx;
		border-radius: 28rpx;
	}
	// 图片区域
	.image-grid {
		display: grid;
		&.grid1 {
			grid-template-columns: repeat(1, 1fr);
			.image {
				display: block;
				max-height: 420rpx;
				max-width: 100%;
			}
		}
		&.grid2 {
			grid-template-columns: repeat(2, 210rpx);
			column-gap: 12rpx;
			row-gap: 12rpx;
			.image {
				display: block;
				width: 210rpx;
				height: 210rpx;
			}
		}
		&.grid3 {
			grid-template-columns: repeat(3, 210rpx);
			column-gap: 12rpx;
			row-gap: 12rpx;
			.image {
				display: block;
				width: 210rpx;
				height: 210rpx;
			}
		}
	}
	
	// 评论顶部
	.comment-head {
		border-top: 2rpx solid #eeeeee;
	}
	// 评论
	.comment-amount {
		height: 64rpx;
	}
	// 评论盒子
	.comment-box {
		.content {
			&.border-top {
				border-top: 1rpx solid #f2f2f2;
			}
			
			.comment {
				display: grid;
				align-items: flex-end;
				grid-template-columns: 1fr 140rpx;
				column-gap: 20rpx;
			}
		}
		
		.reply {
			padding-top: 8rpx;
			transition: all 0.3s;
		}
	}
	
	// 底部操作区域
	.handle-area {
		width: 100vw;
		height: 120rpx;
		border-top: 2rpx solid $uni-bg-color-grey;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		// 编辑按钮
		.edit-button {
			width: 100%;
			height: 68rpx;
			border-radius: 34rpx;
		}
		// 分享点赞
		.handle-grid {
			display: grid;
			grid-template-columns: repeat(2, 148rpx);
		}
	}
	
	// 底部输入框
	.input-container {
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100vw;
		.input-box {
			position: fixed;
			left: 0;
			z-index: 999;
			width: 100%;
			padding: 24rpx;
			border-top: 1rpx solid #eee;
			.input {
				width: 100%;
				min-height: 104rpx;
				max-height: 164rpx;
			}
			.send-button {
				margin-left: $uni-spacing-col-lg;
				width: 140rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 16rpx;
				color: $uni-text-color-inverse;
				background: $uni-color-primary;
			}
		}
	}
</style>
